<template>
  <el-dialog
    :model-value="props.powerFactorVisible"
    title="力调标准"
    width="50%"
    :before-close="handleClose"
  >
    <div class="powerFactor">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane
          v-for="item in powerFactorDataRef"
          :name="item.label"
          :label="item.title"
        >
          <template v-if="activeName === '' + item.label">
            <el-table
              :data="item.child"
              @cell-dblclick="cellDblclick"
              height="300"
              @row-click="rowClick"
            >
              <el-table-column prop="powerFactor" label="功率因数" width="180">
                <template #default="scope">
                  <el-input
                    v-if="scope.row.state"
                    v-model="scope.row.powerFactor"
                    @focus="focusEvent(scope.row, scope.$index, scope.column)"
                    @blur="blurEvent(scope.row, scope.$index, scope.column)"
                  ></el-input>
                  <p @click="cellClick(scope.row, scope.column)" v-else>
                    {{ scope.row.powerFactor }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="coefficient" label="增加或减少的系数(%)">
                <template #default="scope">
                  <el-input
                    v-if="scope.row.state1"
                    v-model="scope.row.coefficient"
                    @focus="focusEvent(scope.row, scope.$index, scope.column)"
                    @blur="blurEvent(scope.row, scope.$index, scope.column)"
                  ></el-input>
                  <p @click="cellClick(scope.row, scope.column)" v-else>
                    {{ scope.row.coefficient }}
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="dialog-footer">
      <div>
        <el-button @click="handleClear">恢复默认值</el-button>
      </div>
      <div>
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="handle"> 确定 </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { powerFactorData } from "@/gm/comm.js";
import {
  sPowerFactorStandardList,
  sPowerFactorStandardReset,
  sPowerFactorStandardUpdate,
} from "@/api/app.js";

const emit = defineEmits(["is-show"]);
// console.log(powerFactorData);
const props = defineProps({
  powerFactorVisible: Boolean,
});
const activeName = ref("0.80");
const tableData = ref([]);
const powerFactorDataRef = ref(powerFactorData);
const flag = ref(false);
const currentData = ref([]);
//初始化
onMounted(() => {
  init();
});
const init = async () => {
  await sPowerFactorStandardList()
    .then((res) => {
      tableData.value = res.data;
      matchPowerFactorData(); //匹配数组
    })
    .catch((err) => {
      console.log(err);
    });
};
const handleClick = (tab) => {
  // console.log(tab.props.name, typeof tab.props.name);
  matchPowerFactorData(tab.props.name);
};
const matchPowerFactorData = (name) => {
  let type = activeName.value;
  if (name != undefined && name != "undefined" && name) type = name;
  switch (type) {
    case "0.80":
      powerFactorDataRef.value[0].child = tableData.value.filter(
        (item) => item.standard === 0.8
      );
      break;
    case "0.85":
      powerFactorDataRef.value[1].child = tableData.value.filter(
        (item) => item.standard === 0.85
      );
      break;
    case "0.90":
      powerFactorDataRef.value[2].child = tableData.value.filter(
        (item) => item.standard === 0.9
      );
      break;
    default:
      break;
  }
};
const cellClick = (row, column) => {
  if (flag.value) {
    switch (column.property) {
      case "powerFactor":
        row.state = !row.state;
        break;
      case "coefficient":
        row.state1 = !row.state1;
        break;
      default:
        break;
    }
  }
};
const focusEvent = (row, index, column) => {
  switch (column.property) {
    case "powerFactor":
      row.oldPowerFactor = row.powerFactor;
      break;
    case "coefficient":
      row.oldCoefficient = row.coefficient;
      break;
    default:
      break;
  }
};
const blurEvent = (row, index, column) => {
  switch (column.property) {
    case "powerFactor":
      row.state = !row.state;
      if (row.oldPowerFactor != row.powerFactor) {
        sPowerFactorStandardUpdateApi(row);
      }
      break;
    case "coefficient":
      row.state1 = !row.state1;
      if (row.oldCoefficient != row.coefficient) {
        sPowerFactorStandardUpdateApi(row);
      }
      break;
    default:
      break;
  }
  // console.log("row", row);
};
const sPowerFactorStandardUpdateApi = async (row) => {
  await sPowerFactorStandardUpdate(row)
    .then((res) => {
      // console.log(res);
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    })
    .catch((err) => {
      console.log(err);
    });
};
//恢复参数
const handleClear = async () => {
  await sPowerFactorStandardReset()
    .then((res) => {
      // console.log(res);
      init();
      ElMessage({
        message: "恢复成功",
        type: "success",
      });
    })
    .catch((err) => {
      console.log(err);
    });
};
//关闭弹窗
const handleClose = () => {
  emit("is-show");
};
//弹窗确定按钮
const handle = () => {
  emit("is-show");
};
const rowClick = (row) => {
  currentData.value = row;
  flag.value = false;
};
//表格双击
const cellDblclick = () => {
  flag.value = true;
};
</script>
<style lang="scss" scoped>
.ele-type {
  display: flex;
  .ele-type-item1 {
    width: 390px;
  }
  .ele-type-item2 {
    flex: 1;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  .el-button {
    width: 100px;
  }
}
</style>
